<template>
  <div class="trend" ref="parent">
      <svg>

      </svg>
      <div class="sng-tag">

      </div>
  </div>
</template>

<script>
import d3 from "d3";
import host from "../xhr";

export default {
  name: "Trend",
  data() {
    return {};
  },
  computed: {
    atCloud() {
      return location.host.indexOf("cloudno.de") >= 0;
    }
  },
  mounted() {
    const parent = d3.select(this.$refs["parent"]);
    const svg = parent.select("svg");
    const outer_width = 1000,
      outer_height = 400;
    const padding = { top: 10, bottom: 20, right: 20, left: 40 };
    const width = outer_width - padding.left - padding.right,
      height = outer_height - padding.top - padding.bottom;
    svg.attr("width", outer_width).attr("height", outer_height);
    const rowScale = d3.scale
      .linear()
      .range([padding.left, padding.left + width]);
    const speedScale = d3.scale
      .linear()
      .range([padding.top, padding.top + height]);
    const colorScale = d3.scale.category10().domain([-Infinity, Infinity]);
    const rowAxis = d3.svg.axis().orient("bottom");
    const speedAxis = d3.svg.axis().orient("left");
    const gRow = svg
      .append("g")
      .classed("axis", true)
      .attr("transform", `translate(0,${padding.top + height})`);
    const gSpeed = svg
      .append("g")
      .classed("axis", true)
      .attr("transform", `translate(${padding.left},0)`);
    const ajax = new Promise((resolve, reject) => {
      d3.json(this.atCloud?host("static/full5000.json"):host("trend/full5000")).get((err, data) => {
        if (err) {
          reject(err);
        } else {
          resolve(data);
        }
      });
    });
    ajax.then(data => {
      let [array, vmin, vmax] = [data["array"], data["min"], data["max"]];
      rowScale.domain(
        (() => {
          let minandmax = array.map(e => [
            d3.min(e.rows, d => d.row_id),
            d3.max(e.rows, d => d.row_id)
          ]);
          return [d3.min(minandmax, d => d[0]), d3.max(minandmax, d => d[1])];
        })()
      );
      (function drawRowAxis(bool) {
        if (bool) {
          rowAxis.scale(rowScale);
          gRow.call(rowAxis);
        }
      })(true);
      (function drawSpeedAxis() {
        speedScale.domain([vmax, vmin]);
        speedAxis.scale(speedScale);
        gSpeed.call(speedAxis);
      })();
      let trend_groups = svg
        .selectAll("g.trend-group")
        .data(array)
        .enter()
        .append("g")
        .classed("trend-group", true)
        .attr("sng", d => d.sng)
        .attr("fill", d => colorScale(d.sng));

      (function drawArea() {
        let area_gen = d3.svg
          .area()
          .interpolate("monotone")
          .x(d => {
            return rowScale(d.row_id);
          })
          .y(d => {
            return speedScale(d.v_max);
          })
          .y0(d => {
            return speedScale(d.v_min);
          });
        trend_groups
          .append("path")
          .classed("trend-area", true)
          .attr("d", d => {
            return area_gen(d.rows);
          })
          .attr("stroke", d => colorScale(d.sng))
          .attr("stroke-width", "0.5px")
          .attr("stroke-opacity", 0.5)
          .attr("fill-opacity", 0.25);
      })();
      (function drawAvgPath() {
        let line_gen = d3.svg
          .line()
          .interpolate("basis")
          .x(d => {
            let v = rowScale(d.row_id);
            return v;
          })
          .y(d => {
            let v = speedScale(d.v_avg);
            return v;
          });
        trend_groups
          .append("path")
          .classed("trend-avg", true)
          .attr("d", d => line_gen(d.rows))
          .attr("stroke", d => colorScale(d.sng))
          .attr("stroke-width", "1px")
          .attr("fill", "none");
      })();
      (function drawSngTag() {
        let trend_tags = svg
          .selectAll("g.sng-tag-label")
          .data(array)
          .enter()
          .append("g")
          .classed("sng-tag-label", true);

        trend_tags
          .append("rect")
          .attr("y", (d, i) => {
            return padding.top + i * 20;
          })
          .attr("x", padding.left)
          .attr("width", 100)
          .attr("height", 20)
          .attr("fill", d => "#FF008000")
          .attr("stroke", d => "none")
          .attr("fill-opacity", 0.5);

        trend_tags
          .append("circle")
          .attr("fill", d => colorScale(d.sng))
          .attr("cx", padding.left + 10 + 2)
          .attr("cy", (d, i) => padding.top + i * 20 + 10)
          .attr("r", 8);
        trend_tags
          .append("text")
          .text(d => `sng:${d.sng}`)
          .attr("y", (d, i) => {
            return padding.top + i * 20 + 16;
          })
          .attr("x", padding.left + 20 + 4)
          .attr("font-size", 18)
          .attr("fill", d => colorScale(d.sng))
          .attr("stroke", "none");
      })();
    });
    ajax.catch(error => {
      console.error("error");
    });
  }
};
</script>

<style lang="scss">
div.trend {
  svg {
    background-color: #ff008000;
    g.axis {
      font: 10px sans-serif;
      path,
      line {
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
      }
    }
  }
  div.sng-tag {
    background-color: black;
    display: none;
    position: relative;
    right: 0;
    top: -400px;
    width: 100px;
    height: 100px;
  }
}
</style>
